package myJs.admin.wechatMemberManage

import myJs.CpLayer
import myJs.Implicits._
import myJs.api.Api
import myJs.cps.BootstrapTableCp.Column
import myJs.cps._
import myJs.myPkg.{MyFetch, SwalOptions, swal}
import myJs.tool.Pojo._
import myJs.tool.Tool
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.web.html._

import scala.collection.immutable.SeqMap
import scala.scalajs.js
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.pojo.WechatMember.WechatMemberData
import typings.csstype.csstypeStrings
import com.softwaremill.quicklens._

/**
 * Created by yz on 21/1/2022
 */
@react object Cp {

  type Props = Unit

  val curPage = WechatMemberManage

  val component = FunctionalComponent[Props] { props =>

    val (datas, setDatas) = useState(List.empty[ujson.Obj])
    val (addShow, setAddShow) = useState(false)
    val (modifyShow, setModifyShow) = useState(false)
    val (wechatMember, setWechatMember) = useState(WechatMemberData())

    object FTool {

      def tbFmt(field: String) = (v: ujson.Value, row: ujson.Obj) => {
        field match {
          case _ => span(v.myStr)()
        }
      }

      def deleteData(id: String) = () => {
        val options = SwalOptions(title = "", text = "确定要删除此数据吗？", `type` = "warning", showCancelButton = true,
          showConfirmButton = true, confirmButtonClass = Tool.confirmButtonClass, confirmButtonText = "确定",
          closeOnConfirm = false, cancelButtonText = "取消", showLoaderOnConfirm = true,
          cancelButtonClass = Tool.cancelButtonClass)
        swal(options, () => {
          Api.wechatMember.delete(id).map { xhr =>
            refreshTableB().map { x =>
              swal(SwalOptions(title = "成功", text = "删除成功", `type` = "success"))
            }
          }
        })
      }

      def updateShow(phone: String) = () => {
        Api.wechatMember.getByPhone(phone).map { response =>
          setWechatMember(response.modify(_.password).setTo(""))
          setModifyShow(true)
        }
        ()
      }

      def operateFmt = (v: ujson.Value, row: ujson.Obj) => {
        span(
          a(style := Style(cursor = csstypeStrings.pointer), className := "btn btn-success btn-xs myUpdateShow",
            title := "重置", onClick := FTool.updateShow(row("phone").str),
            span(
              em(className := "fa fa-edit", "重置密码")
            )
          ),
          " ",
          a(style := Style(cursor = csstypeStrings.pointer), className := "btn btn-danger btn-xs myDelete",
            title := "删除", onClick := FTool.deleteData(row("phone").str),
            span(
              em(className := "fa fa-remove", "删除")
            )
          )
        )()
      }

      def refreshTableB = () => {
        Api.wechatMember.all.map { response =>
          setDatas(response)
        }
      }

      def comVFmt(fileTitle: String) = (v: ujson.Value, row: ujson.Obj) => {
        fileTitle match {
          case _ => v.myStr
        }
      }

      def addShowChange = (v: Boolean) => {
        setAddShow(v)
      }

      def addShow = () => {
        setAddShow(true)
      }

      def modifyShowChange = (v: Boolean) => {
        setModifyShow(v)
      }

      def wechatMemberChange = (v: WechatMemberData) => {
        setWechatMember(v)
      }

    }

    useEffect(() => {
      FTool.refreshTableB()
    }, List()
    )

    val map = SeqMap("phone" -> "手机", "createTime" -> "创建时间")
    val basicColumns = map.map { case (k, v) =>
      val searchKind = k match {
        case "createTime" => DateSearch
        case _ => TextSearch
      }
      val fmt = FTool.tbFmt(k)
      val comVF = FTool.comVFmt(v)
      Column(field = k, title = v, operable = true, searchKind = searchKind, formatter = fmt, comVF = comVF)
    }.toList
    val operateColumn = Column(field = "operate", title = "操作", formatter = FTool.operateFmt, comVF = FTool.comVFmt(""))
    val columns = basicColumns :+ operateColumn

    CpLayer(title = curPage.titleStr)(div(className := "page-content",
      div(className := "row-fluid",
        div(className := "row",
          div(className := "col-md-12 col-sm-12",
            div(className := "portlet light",
              div(className := "portlet-title",
                div(className := "caption", s"${curPage.titleStr}")
              ),
              div(className := "portlet-body",

                div(className := "table-responsive",
                  div(id := "toolbar",
                    button(className := "btn btn-primary myAddShow", onClick := FTool.addShow,
                      i(className := "fa fa-plus"), " 新增"
                    ), " ",
                  ),

                  BootstrapTableCp(columns = columns, datas = datas),
                ),

                AddCp(refreshTableB = FTool.refreshTableB, show = addShow, showChange = FTool.addShowChange),
                ModifyCp(refreshTableB = FTool.refreshTableB, show = modifyShow, showChange = FTool.modifyShowChange,
                  wechatMember = wechatMember, wechatMemberChange = FTool.wechatMemberChange)

              ),
            )
          )
        )
      )
    )
    )

  }


}
